<template>
	<view class="order-detail">
		<view class="bg-primary flex ali-c p-20" style="height: 200rpx">
			<text v-if="ordertype==1">{{ info.status | statusFilter }}</text>
			<text v-if="ordertype==2">{{ info.status==0?'待付款':info.status==6?'已完成':info.status==5?'售后退款中':info.status==7?'售后完成':'已取消'}}</text>
			<text v-if="ordertype==3">{{ info.status==1?'准备中':info.status==2?'配送中':info.status==3?'已到达':info.status==5?'售后退款中':info.status==7?'售后完成':info.status==4?'已取消':'待付款'}}</text>
			<text v-if="ordertype==4" >{{ info.status==0?'待付款':info.status==6?'已完成':info.status==5?'售后退款中':info.status==7?'售后完成':'已取消'}}</text>
			<!-- {{ info.status==1?'待付款':info.status==2?'待核销':info.status==3?'已核销':info.status==5?'售后退款中':info.status==7?'售后完成':info.status==4?'已取消':'已完成'}}</view> -->
			<!-- {{ item.status==0?'待付款':item.status==1?'待核销':item.status==2?'已核销':item.status==5?'售后退款中':item.status==7?'售后完成':item.status==4?'已取消':'已完成'}} -->
			<text v-if="ordertype==5" >{{ info.status==0?'待付款':info.status==1?'待核销':info.status==2?'已核销':info.status==5?'售后退款中':info.status==7?'售后完成':info.status==4?'已取消':'已完成'}}</text>
		</view>
		<view class="flex jus-b p-20 bg-white text-sm">
			<view class="flex jus-b ali-c">
				<u-icon name="order" class="text-primary" color="#ff3b26" size="36"></u-icon>
				<view class="flex-1">
					<view>订单号：{{ info.order_sn || '' }}</view>
				</view>
			</view>
			<view v-if="ordertype==1" class="text-primary">{{ info.status | statusFilter }}</view>
			<view v-if="ordertype==2" class="text-primary">{{ info.status==0?'待付款':info.status==6?'已完成':info.status==5?'售后退款中':info.status==7?'售后完成':'已取消'}}</view>
			<view v-if="ordertype==3" class="text-primary">{{ info.status==1?'准备中':info.status==2?'配送中':info.status==3?'已到达':info.status==5?'售后退款中':info.status==7?'售后完成':info.status==4?'已取消':'待付款'}}</view>
			<text v-if="ordertype==5" >{{ info.status==0?'待付款':info.status==1?'待核销':info.status==2?'已核销':info.status==5?'售后退款中':info.status==7?'售后完成':info.status==4?'已取消':'已完成'}}</text>
			<view v-if="ordertype==4" class="text-primary">{{ info.status==0?'待付款':info.status==6?'已完成':info.status==5?'售后退款中':info.status==7?'售后完成':'已取消'}}</view>
			
		</view>
		<view class="order-product">
			<view class="order-product-item" v-for="item in info.goods" :key="`goods-${item.id}`">
				<view class="image">
					<image :src="item.url" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="line-two">{{ item.goods_name }}</view>
					<view class="flex jus-b mt-10 jus-b">
						<view>
							<text class="text-primary text-lgs">¥{{ item.goods_price }}</text>
							<text>/元</text>
						</view>
						<view class="flex ali-c">
							<u-icon size="28" name="close"></u-icon>
							<text>{{ item.goods_num }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block" :style="{'display':ordertype==4?'none':''}">
			<view class="title">收货信息</view>
			<view class="flex jus-b">
				<view class="flex-1 flex">收货人：{{ info.shouhuoren || "" }}</view>
				<view class="flex-1 flex">配送方式：{{ info.delivery_method == 1?'物流配送':'自提' }}</view>
			</view>
			<view class="flex">收货人电话：{{ info.mobile || "" }}</view>
			<view class="flex">收货地址：{{ info.province || "" }} {{ info.city || "" }} {{ info.town || "" }} {{ info.street || "" }}</view>
		</view>
		<view class="block mt-20 u-border-bottom">
			<view class="title">订单信息</view>
			<view class="flex">订单编号：{{ info.order_sn || "" }}</view>
			<!-- <view class="flex">商品总数：{{ info.order_sn || "" }}</view> -->
			<view class="flex">下单日期：{{ info.addtime || "" }}</view>
			<view class="flex" v-if="info.delivery_method!==1">核销日期：<text v-if="info.scan_time>0">{{ dateFormat(info.scan_time) || "暂无" }}</text></view>
		</view>
		<view class="block u-border-bottom">
			<view class="flex jus-b"
				><text>商品总额:</text><text>¥{{ info.total_money-info.freight_money || 0.00 }}</text></view
			>
			<view class="flex jus-b"
				><text>配送费:</text><text>¥{{ info.freight_money || 0.00 }}</text></view
			>
			<!-- <view class="flex jus-b"><text>打包盒:</text><text>¥0.00</text></view> -->
			<view class="flex jus-b"><text>优惠金额:</text><text>¥{{info.coupon_money}}</text></view>
			<view class="flex jus-b text-black text-lg"
				><text>订单总价:</text><text>¥{{ info.total_money || 0.00 }}</text></view
			>
		</view>
		<view class="block">
			<!-- <view class="flex jus-b"><text>会员优惠:</text><text>¥0</text></view> -->
			<!-- <view class="flex jus-b"><text>红包:</text><text>¥{{info.coupon_money}}</text></view> -->
			<view class="flex jus-b"><text>平台优惠:</text><text>¥0</text></view>
			<view class="flex jus-b"><text>积分抵用:</text><text>¥0</text></view>
			<view class="flex jus-b text-black text-lg"><text>实付金额:</text><text>¥{{ info.pay_money || 0 }}</text></view>
		</view>
	</view>
</template>
<script>
import request from "../../utils/admin-request.js"
export default {
	data() {
		return {
			id: 0,
			info: null,
			ordertype:null,//1商城订单，2到店订单，3，外卖订单，4 自提订单
		}
	},
	onLoad(option) {
		this.id = option.id
		this.ordertype = option.ordertype
		console.log(this.ordertype,'option',option)
		this.getInfo()
	},
	methods: {
		async getInfo() {
			let { data } = await request({
				url: "/api/merch/orderDetail",
				data: {
					orderid: this.id,
				},
			})
			this.info = data
		},
		dateFormat: function(value) {
			var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2);
			var sdate = ("0" + date.getDate()).slice(-2);
			var hour = ("0" + date.getHours()).slice(-2);
			var minute = ("0" + date.getMinutes()).slice(-2);
			var second = ("0" + date.getSeconds()).slice(-2);
			// 拼接
			var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
			// 返回
			return result;
		},
	},
}
</script>
<style lang="scss">
.order-detail {
	.block {
		padding: 20rpx;
		background-color: #fff;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			position: relative;
			padding-left: 20rpx;
		}
		.title::before {
			content: "";
			position: absolute;
			left: 0;
			bottom: -10rpx;
			width: 8rpx;
			height: 70%;
			border-radius: 100rpx;
			background-color: $u-primary;
			top: 50%;
			transform: translateY(-50%);
		}
		.flex {
			font-size: 26rpx;
			color: #555555;
			margin-top: 8rpx;
		}
	}
}
.order-item {
	margin-top: 20rpx;
}
.order-item:first-child {
	margin-top: 0;
}
.order-product {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	.order-product-item {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		.image {
			height: 170rpx;
			width: 170rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
